import React from 'react';
import { Icon, Input, message, Select } from 'antd';
import { Link } from 'react-router';
import moment from 'moment';
import './allgoods.less';
import $ from 'jquery';
import Config from '../../common/config';

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

const Option = Select.Option;
const InputGroup = Input.Group;

const config = new Config();
const token = sessionStorage.getItem('token')

export default class GoodsHistoricalPrice extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            productid: this.props.params.productid,//商品ID
            ProductHisPricelist: [],//商品历史价格列表
            HistoryTimeData: [],//绑定时间下拉框的数据
            historytimeid: undefined,//"请选择",//绑定时间下拉框的ID
        }
        this.changeHistoryTime = this.changeHistoryTime.bind(this);
    }

    componentDidMount() {
        console.log(this.state.productid)
        if (this.state.productid) {
            this.GetProductHisPrice();
        } else {
            message.error('获取商品ID失败，请返回重新操作', 2);
        }
    }

    //商品历史价格列表
    GetProductHisPrice() {
        $.ajax({
            url: `${config.JuseProduct}/products/historicalPrice`,
            type: "get",
            headers: {
                'Authorization': 'Bearer ' + token,
            },
            data: {
                productId: this.state.productid,
            },
            success: res => {
                console.log('商品历史价格列表', res);
                if (res.code === 200) {
                    const data = res.data
                    data.sort((a, b) => a.year < b.year)
                    const HistoryTimeData = data.map((item, index) => {
                        item.list.forEach(value => {
                            value.time = moment(item.historicalDate).format('MM-DD')
                            value.价格 = parseFloat(value.marketPrice)
                        })
                        item.list.sort((a, b) => a.historicalDate > b.historicalDate)
                        return <Option key={index} value={String(item.year)}>
                            {item.year}
                        </Option>
                    })
                    console.log(data[0].list)
                    this.setState({
                        data,
                        HistoryTimeData,
                        historytimeid: String(data[0].year),
                        ProductHisPricelist: data[0].list
                    })
                }
            }
        });
    }

    //选择时间
    changeHistoryTime(value) {
        const { data } = this.state
        let ProductHisPricelist
        data.forEach(item => {
            if (item.year == value) {
                ProductHisPricelist = item.list
            }
        })
        this.setState({
            historytimeid: value,
            ProductHisPricelist
        })
    }

    render() {
        return (
            <div className='goodshistoricalprice-label'>
                <div className='tanm-a'><p><Link to={'/goodsdetail/' + this.state.productid}><Icon type="left" />返回</Link></p></div>
                <p className='hisprice-p'>历史价格表</p>
                <div className='addetd addetd-a' style={{ marginLeft: 40, marginBottom: 20 }}>
                    <InputGroup compact>
                        <Input addonBefore="时间(年)" />
                        <Select
                            style={{ width: 130, marginLeft: 19 }}
                            value={this.state.historytimeid}
                            onChange={this.changeHistoryTime}
                        >
                            {this.state.HistoryTimeData}
                        </Select>
                    </InputGroup>
                </div>
                <LineChart width={600} height={300} data={this.state.ProductHisPricelist} margin={{ top: 20, right: 20, bottom: 20, left: 20 }} >
                    <XAxis type='category' dataKey='time' />
                    <YAxis type='number' />
                    <Tooltip />
                    <CartesianGrid stroke='#cbd1c6' />
                    <Line type='monotone' isAnimationActive={false} connectNulls={false} dataKey='价格' stroke='#96ca59' />
                </LineChart>
            </div>
        )
    }
}
